<template>
  <div class="projects-container" v-loading="loading">
    <el-table :data="tableData" border fit highlight-current-row>
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank" class="link">{{
            scope.row.name
          }}</a>
        </template>
      </el-table-column>
      <el-table-column label="项目描述" align="center">
        <template slot-scope="scope">
          {{ scope.row.description.toString() }}
        </template>
      </el-table-column>
      <el-table-column label="预览图" align="center" width="150">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.thumb1"
            fit="cover"
            style="width: 120px"
            :preview-src-list="previewList"
          />
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="github"
            placement="top"
            transition="2000"
          >
            <el-button
              type="primary"
              class="github"
              icon="iconfont icon-github"
              circle
              size="mini"
              @click="handleView(scope.row)"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="top"
            transition="2000"
          >
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="handleEidt(scope.row)"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="top"
            transition="2000"
          >
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="handleDel(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑" :visible.sync="dialogFormVisible" fullscreen>
      <el-form :model="form" label-position="top">
        <el-form-item label="项目名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="项目描述（每一项描述以英文逗号分隔）">
          <el-input v-model="form.description" />
        </el-form-item>
        <el-form-item label="项目链接">
          <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item label="github">
          <el-input v-model="form.github" />
        </el-form-item>
        <el-form-item label="预览图">
          <Upload v-model="form.thumb" />
        </el-form-item>
        <el-form-item label="排序">
          <el-select v-model="form.order">
            <el-option
              v-for="order in orders"
              :value="order"
              :label="order"
              :key="order"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delProject, getProject, setProject } from "@/api/project";
import { server_URL } from "@/urlConfig";
import Upload from "@/components/Upload";
import { editBlog } from "@/api/blog";

export default {
  name: "Projects",
  components: { Upload },
  data() {
    return {
      tableData: [],
      loading: false,
      previewList: [],
      dialogFormVisible: false,
      form: {
        name: "",
        description: "",
        url: "",
        github: "",
        thumb: "",
        order: "",
      },
      orders: ["1", "2", "3", "4", "5"],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      getProject()
        .then((res) => {
          this.tableData = res.data.map((v) => ({
            ...v,
            thumb1: server_URL + v.thumb,
          }));
          this.previewList = this.tableData.map((v) => v.thumb1);
        })
        .finally(() => (this.loading = false));
    },
    handleView(row) {
      window.open(row.github);
    },
    handleEidt(row) {
      this.form = { ...row, description: this.form.description.toString() };
      this.dialogFormVisible = true;
    },
    handleDel(row) {
      this.$confirm("确定删除此项目吗, 是否继续?", "是否删除此片文章", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delProject(row.id).then(() => {
            this.fetchData();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleConfirm() {
      editBlog({
        ...this.form,
        description: this.form.description.split(","),
      }).then(() => {
        this.$message.success("修改成功");
        this.dialogFormVisible = false;
        this.fetchData();
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/icon/iconfont.css";

.projects-container {
  padding: 20px;
  .link {
    &:hover {
      color: rgb(163, 163, 163);
    }
  }
  .github {
    background-color: rgb(163, 163, 163);
    border: 1px solid rgb(163, 163, 163);
  }
}
</style>
